<template>
  <view class="w100p pr common_wrap">
    <CommonHeader :title="$t('售后')" color="#000" backgroundColor="rgba(236,246,254,1)" :is-right="false"></CommonHeader>
    <view class="w100p flex-item oh"> 
      <scroll-view scroll-y class="w100p scroll-Y">
        <!-- 采购 -->
        <view class="wrapper-info pr">
          <!-- 基础信息 -->
          <view class="base-info">
            <view class="left-avatar">
			  <view class="avatar">
			    <image src="/static/caigou/pic.png" mode="aspectFill" class="w-100 h-100" style="border-radius: 500rpx;"></image>
			  </view>
            </view>
            <!-- 单数 -->
			<view style="flex: 1;">
              <view class="flex mt-10">
				<flag class="w-30 h-20 mr-4 ml-15" :country="detailInfo.user_info.country" />
                <view class="name ellipsis_one">{{ get(detailInfo, 'user_info.username') }}</view>
              </view>
				<view :class="langR == 'zh'?'between h-60':'between h-60 r_between'">
				  <p class="user-sty">
					{{
					[$t('供应商'),$t('经销商'),$t('货代公司'),$t('采购商'),$t('服务公司'),$t('报关公司'),$t('运输公司'),$t('国际物流公司'),$t('司机'),$t('服务商'),$t('俄罗斯个人'),$t('翻译员')][detailInfo.identity_type]
                  }}
					<!-- {{$t('采购商')}} -->
				</p>
					<view class="right-numwrap">
						<view class="getInfo">{{$t('联系TA')}}</view>
						<view class="getInfo">{{$t('打电话')}}</view>
					</view>
				</view>
			</view>
          </view>
			
			<view  class="caigou-info">
				<view class="">
				  <view class="text-010 fz28 font-bold mt-20">{{$t('申请原因')}}</view>
				  <view class="reasonSty">{{ detailInfo.reason }}</view>
				</view>
				<view class="">
				  <view class="text-010 fz28 font-bold mt-20">{{$t('赔付比例')}}</view>
				  <view class="reasonSty">{{ detailInfo.compensation_ratio }}</view>
				</view>
				<view class="">
				  <view class="text-010 fz28 font-bold mt-40">{{$t('上传图片')}}</view>
				  <view class="flex mt-20">
					  <image v-for="item in detailInfo.image_url.split(',')" :src="getImageUrl(item)" mode="aspectFill" class="w-150 h-150"></image>
				  </view>
				</view>
				<!-- <view class="">
					<sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3"></sunui-upimg>
				</view> -->
				<!-- <view v-if="detailInfo.image_url" class="">
				  <view class="text-010 fz28 font-bold mt-40">{{$t('上传视频')}}</view>
				  <view class="">
					  <image src="../../../static/img/che.png" mode="aspectFill" class="w-150 h-150"></image>
				  </view>
				</view> -->
				<view class="">
					<!-- <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3" type="video"></sunui-upimg> -->
				</view>
			</view>
			
          <view style="height: 16rpx;"></view>
        </view>
		
      </scroll-view>
		<view>
			<view class="footer_btn4">
				<u-button v-if="detailInfo.buyer_agree_status == 0" class="btn_blue" @click="">
					{{$t('提交申请')}}
				</u-button>
				<u-button v-else class="btn_blue" @click="">
					{{$t('同意平台判定')}}
				</u-button>
			</view>
		</view>
    </view>

    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
          play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
        </video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
      <view class="w100p">
        <image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
      </view>
    </uni-popup>

  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import {
  IMAGE_URL,
} from "@/config/app"

import CommonHeader from "@/pages/components/common-header.vue";
import sunuiUpimg from "@/components/tm-upload/tm-upload.vue";
import { Shoporderafter_sales_detail } from '@/api/freight.js'

export default {
  components: {
    CommonHeader,
	sunuiUpimg
  },
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      playVideo: '',
      commonImg: '',
      currntMainPic: '',
      currentVideo: '',
      isShow: true,
      historyList: [], //浏览记录列表
      list: [],
      product: {},
	  orderInfoOn:false,
	  AfterSalesOpen:false,
	  uniRate:2,
	  statusKey: 1,
	  saleFlag: false,
	  detailInfo: {},
	  upPicUrl: 'https://cx.csredian.com/app/index.php?i=7&c=entry&a=wxapp&v=2.2.4&do=upload_img&m=wjyk_sqpt'
    }
  },
  
  methods: {
    // 发货
    onSendShiping() {
      uni.navigateTo({
        url:'/pages/publish/start',
        webview: 'zWebView',
      })
    },
    // 查看物流
    onSeeWuliu() {
      uni.navigateTo({
        url:'/pages/shipmentRecord/index?status=3',
        webview: 'zWebView',
      })
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`
    },
	afterSalesDetail(orderId) {
		Shoporderafter_sales_detail({
			user_id: uni.getStorageSync('user_id'),
			order_id: orderId
		}).then(res => {
			if(res.data.code == 200) {
				this.detailInfo = res.data.data
			}
		})
	},
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === 'android') {
        this.playVideo = video;
        this.$refs.popupVideo.open()
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      })
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取数据
    async getData() {
      const { data } = await this.$u.api.shopping.getProduct({
        id: 338,
      });
      this.currntMainPic = data.product.pic;
      this.list = [data.product.pic, data.product.pic, data.product.pic];
      this.currentVideo = data.product.video;
      this.product = data.product;
    },
    // 浏览记录列表
    async getHistoryData() {
      try {
        const {
          data
        } = await this.$u.api.shopping.getMemberHistory({
          id: 338,
          type: "shop",
        });
        this.historyNum = data.member_history_count || 0;
        if (!!data.member_history?.length) {
          let arr = [];
          data.member_history.map((item, index) => {
            let str = item[this.plang('username')] + this.$t("正在查看");
            arr.push(str)
          })
          this.historyList = [...arr];
        }
      } catch (e) {

      }
    },
  },

  onLoad(options) {
	if (options.status) {
		this.statusKey = options.status
	}
	if(options.saleFlag) {
		this.saleFlag = options.saleFlag
	}
	if (options.order_id) {
		this.afterSalesDetail(options.order_id)
	}
    this.videos = uni.createVideoContext('myVideo');
    // this.getData();
    // this.getHistoryData();
  },
}
</script>

<style scoped lang="scss">
	@import '@/assets/appScss.scss';
@import './index.scss';
.user-sty {
		background-image: url('../../../static/userLogoBg.png');
		background-size: 100% 100%;
		margin-left: 12rpx;
		min-width: 120rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 30rpx;
		box-shadow: 0rpx 1.25rpx 0.75rpx 0rpx #D061024D;
		color: #FFFFFF;
		text-align: center;
		padding-left: 26rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		z-index: 10;
		/deep/ .u-btn {
			padding: 0 !important;
		}
		/deep/ uni-button {
			padding: 0 !important;
			margin: 0 !important;
		}
		/deep/ .u-hairline-border[data-v-3bf2dba7]:after {
			border: none !important;
		}
		.btn_blue{
			width: 100%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background-color: #278AFF;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx; 
			padding: 0;
		}
		.btn_green{
			width: 49%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 0 18rpx 18rpx 0;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background-color: #03C24F;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
			padding: 0;
		}
	}
	.r_between{
		.user-sty{
			padding:0 10rpx;
			background-image:none;
			border-radius: 500px;
			background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
			box-shadow: -4px 4px 6px 0px rgba(255, 203, 151, 0.46) inset, -2px -3px 9.9px 0px #FFBE7C inset, 0px 4px 13.8px 0px #DEE1EF;


		}
	}
</style>